---
title: Tailwind CSS List - Components Library @David UI
description: Organize content with Tailwind CSS list components. Perfect for menus, directories, or navigation with customizable and responsive designs.
github: List
prev: docs/react/icon-button
next: docs/react/radio
---

# Tailwind CSS List

David UI’s list component helps you create organized and responsive lists. Perfect for directories, menus, or navigation, this Tailwind CSS-based component supports custom styles and layouts. 

Browse our versatile component examples to include structured lists effortlessly in your Tailwind CSS projects.


---

## Basic List

Explore this example to integrate a straightforward, responsive list component into your project. Fully customizable to suit your specific design needs.

<PreviewWithCode relativePath="list/list-demo.tsx" language="html" />

---

## List with Icon

This interactive list example features action buttons represented as icons. Each item can perform tasks like deletion, editing, or other actions, making it ideal for lists requiring both navigation and functionality.

<PreviewWithCode relativePath="list/list-with-icon.tsx" language="html" />

---

## List with Avatar

Highlight individuals or teams with this visually appealing list example, which pairs profile images with text descriptions. Perfect for contact lists, team pages, or similar use cases.

<PreviewWithCode relativePath="list/list-with-avatar.tsx" language="html" />

---

## List with Badge

Improve your lists with notification badges, offering users a clear visual indication of item counts or message statuses, such as "Inbox," "Spam," or "Trash." This design is especially useful for content-heavy interfaces.

<PreviewWithCode relativePath="list/list-with-badge.tsx" language="html" />

---

## List with Selected Item

Use this example to showcase a pre-selected or default item in a list. The selected item is visually distinguished with a semi-transparent background (`bg-blue-gray-50/50`), making it stand out from the rest.

<PreviewWithCode relativePath="list/list-with-selected-item.tsx" language="html" />

---

## List with Disabled Item

Easily represent non-selectable list options with this example. Disabled items are styled to clearly convey their inactive state, ensuring a smooth user experience.

<PreviewWithCode relativePath="list/list-with-disabled-item.tsx" language="html" />

---

## List with Link

Transform your list items into interactive links using this example. Each item is wrapped in an anchor tag (`<a href="#">`), making them navigable to other pages or actions.

<PreviewWithCode relativePath="list/list-with-link.tsx" language="html" />


---

## List Custom Styles

Discover how to customize your David UI list component with this example. Customize styles to align with your project’s unique design language.

<PreviewWithCode relativePath="list/list-custom-styles.tsx" language="html" />
